<template>
    <div class="title">
        <div class="title-title">热点新闻</div>
        <div class="news-hr"></div>
        <div class="list" @click="handleClickNews">
            <div class="list-title">僵尸企业为何僵而不死？如何破局？国有企业混改</div>
            <div class="imgs">
              <img src="static/imgs/news1-1.jpg" class="imgs-item">
              <img src="static/imgs/news1-2.jpg" alt="" class="imgs-item">
            </div>
            <div class="list-info">2019年9月18日 - 广东出台首个僵尸企业司法处置工作指引 2019年06月10日 19:32 广东出台首个僵尸企业司法处置工作指引 2019年06月10日 19:32 11部门要求分类处置“僵尸</div>
        </div>
        <div class="news-hr"></div>
        <div class="list" @click="handleClickNews2">
            <div class="list-title">僵尸企业 | “僵尸企业”应该如何界定？</div>
            <div class="imgs">
              <img src="static/imgs/news2-1.png" class="imgs-item">
              <img src="static/imgs/news2-2.png" class="imgs-item">
            </div>
            <div class="list-info">“僵尸企业”不是一个法律上的概念，它最早由美国波士顿大学的经济学者彼得•科伊在20世纪80年代提出，属于经济学概念，指“那些无望恢复生气，但由于获得放贷者或政府的支持而免于倒闭的负债企业”。</div>
        </div>
        <div class="news-hr"></div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>若有任何问题请联系我们</span>
            </div>
            <div v-for="item of contact" :key="item.id" class="text item">
                {{item.content}}
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      contact: [{
        id: '001',
        content: '电话'
      }, {
        id: '002',
        content: '地址'
      }, {
        id: '003',
        content: 'QQ'
      }, {
        id: '004',
        content: '公众号'
      }, {
        id: '005',
        content: '工作时间'
      }, {
        id: '006',
        content: '传真'
      }]
    }
  },
  methods: {
    handleClickNews () {
      this.$router.push('/red1')
    },
    handleClickNews2 () {
      this.$router.push('/red2')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibies.styl';
    .title{
      width: 100%;
      font-size: 22px;
      font-weight: bold;
      color: $bgColor;
      position relative;
      margin-bottom: .5rem;
      margin-top 1.2rem;
    }
    .title-title{
      position relative;
      left: 10%;
      width: 70%;
    }
    .news{
      left: 10%;
    }
    .news-hr{
        border: grey 1px solid;
        width: 60%;
        position relative;
        left: 10%;
        margin-bottom: .3rem;
    }
    .list{
        position relative;
        left: 10%;
        width 70%;
    }
    .list-title{
        font-size: 28px;
        color: black;
    }
    .imgs{
      display flex;
      height: 3rem;
    }
      .imgs-item{
        width: 25%;
        margin-top 1%;
        margin-right: 5%;
        height: 2.5rem;
      }
    .list-info{
        width: 80%;
        word-break:break-all;
        font-size: 15px;
        text-indent: 3%;
        margin-top: 1%;
        color: grey;
        letter-spacing 2px;
    }
     .text {
    font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }。

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        height: 330px;
        width: 20%;
        position: absolute;
        top: 10%;
        left: 72%;
        background: #F5F5F5;
    }
</style>
